<template>
  <div>
    <bouncer ref="bouncer" class="mt-shop-detail">
      <div class="detail-shop">
        <div class="shop-icon-wrapper">
          <div class="shop-icon">
            <img v-if="DetailShop.avatar_view" :src="DetailShop.avatar_view+'?imageView2/2/w/100'"/>
          </div>
          <div class="shop-share" @click="shareopen">
          </div>
        </div>
        <div class="shop-title-wrapper">
          <label class="shop-title ellipsis">
            <span v-if="DetailShop.verify_classify">{{DetailShop.verify_name}}</span>
            <span v-else>{{DetailShop.contact_name}}</span>
          </label>
          <span class="verify-type firm-jxs" v-if="DetailShop.verify_classify==2&&DetailShop.verify_type==3"></span>
          <span class="verify-type firm-pfs" v-if="DetailShop.verify_classify==2&&DetailShop.verify_type==13"></span>
          <span class="verify-type own-jxs" v-if="DetailShop.verify_classify==1&&DetailShop.verify_type==3"></span>
          <span class="verify-type own-pfs" v-if="DetailShop.verify_classify==1&&DetailShop.verify_type==13"></span>
          <span class="verify-type own-yf" v-if="DetailShop.verify_classify==1&&DetailShop.verify_type==12"></span>
          <span class="verify-type own-ywy" v-if="DetailShop.verify_classify==1&&DetailShop.verify_type==2"></span>
          <span class="verify-type own-yzh" v-if="DetailShop.verify_classify==1&&DetailShop.verify_type==4"></span>
          <span class="verify-type own-yzj" v-if="DetailShop.verify_classify==1&&DetailShop.verify_type==11"></span>
        </div>
        <div class="shop-kind-wrapper ellipsis">
          <label v-if="DetailShop.kind_supply!=null&&DetailShop.kind_supply.length>0">
            <span>出售水产种类:</span>
            <span v-for="(data, index) in DetailShop.kind_supply" :key="index">{{data.name}}</span>
          </label>
          <label v-if="DetailShop.kind_demand!=null&&DetailShop.kind_demand.length>0">
            <span>求购水产种类:</span>
            <span v-for="(data, index) in DetailShop.kind_demand" :key="index">{{data.name}}</span>
          </label>
        </div>
      </div>
        <div class="detail-tab">
          <tab v-if="saleNumber>=buyNumber">
            <tab-item selected @on-item-click="onItemClicksupply">正在出售<span>({{saleNumber}})</span></tab-item>
            <tab-item @on-item-click="onItemClickdemand">正在求购<span>({{buyNumber}})</span></tab-item>
          </tab>
          <tab v-else>
            <tab-item selected @on-item-click="onItemClickdemand">正在求购<span>({{buyNumber}})</span></tab-item>
            <tab-item @on-item-click="onItemClicksupply">正在出售<span>({{saleNumber}})</span></tab-item>
          </tab>
          <div class="tab-item" v-show="nowIndex===m">
            <div v-if="ShopSupplyloading == true && ShopSupplyStatus === 'loading'" class="load_wrap" >
              <i class="fa fa-spinner fa-pulse"></i>
              数据加载中...
            </div>
            <div v-else-if="ShopSupplyStatus === 'noData'" class="load_wrap">
              <div class="no-data">暂无数据</div>
            </div>
            <div v-else-if="ShopSupplyStatus === 'error'" class="load_wrap error" @click="getloadingdata()">
              <i class="fa fa-frown-o"></i>
              加载失败，点击刷新
            </div>
            <div class="supply-list-item vux-1px-b" v-for="(data,index) in ShopSupplyList" :key="index" v-else>
              <a :href="'#/trade/supply/' + data.id ">
                <div class="item-img vux-1px" v-bind:style="{backgroundImage: 'url(' + data.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="data.img.length>1">多图</label></div>
                <div class="item-ifo">
                  <div class="ifo-wrap">
                    <div class="ifo-wrap-cell">
                      <div class="goods-msg clearfix">
                        <div class="goods-name ellipsis-2">
                          <i class="pre-label" v-show="data.sale_type==2">预售</i>
                          <span class="name">{{data.kind_name}}{{data.title}}</span>
                        </div>
                        <div class="goods-price">
                          <div class="pre-date ellipsis" v-if="data.sale_type==2">
                            <span class="pre-time ellipsis">{{data.sale_pre.month}}月{{data.sale_pre.day}}上市</span>
                          </div>
                          <div class="price" v-else>
                            <label v-if="data.price_type==2" class="face">面议</label>
                            <label v-else><big>{{data.price}}</big>元/{{data.price_unit_name}}</label>
                          </div>
                        </div>
                      </div>
                      <div class="goods-from">
                        <div class="goods-address ellipsis">
                          <i class="address-icon"></i>
                          <span>{{data.province_name}}</span>
                          <span>{{data.city_name}}</span>
                        </div>
                        <div class="goods-size">
                          <label v-if="data.size_unit_name">
                            <span>{{data.size_min}}-{{data.size_max}}{{data.size_unit_name}}</span>
                          </label>
                          <label v-else>规格不限</label>
                        </div>
                      </div>
                      <div class="goods-seller">
                        <div class="seller">
                          <label class="name ellipsis">
                            <span v-if="data.verify_classify" >{{data.verify_name}}</span>
                            <span v-else>{{data.contact_name}}</span>
                          </label>
                          <span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
                          <span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
                          <span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
                          <span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
                          <span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
                          <span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
                          <span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
                          <span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
                        </div>
                        <div class="data ellipsis">{{data.updated_view}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          </div>
          <div class="tab-item" v-show="nowIndex===n">
            <div v-if="ShopDemandloading == true&& ShopDemandStatus ==='loading'" class="load_wrap">
            <i class="fa fa-spinner fa-pulse"></i>
            数据加载中...
          </div>
          <div v-else-if="ShopDemandStatus === 'noData'" class="load_wrap">
            <div class="no-data">暂无数据</div>
          </div>
          <div v-else-if="ShopDemandStatus === 'error'" class="load_wrap error" @click="getloadingdata()">
            <i class="fa fa-frown-o"></i>
            加载失败，点击刷新
          </div>
          <div class="supply-list-item vux-1px-b" v-for="(data,index) in ShopDemandList" :key="index" v-else>
            <a :href="'#/trade/demand/' + data.id ">
              <div class="item-img vux-1px" v-if="data.img_view!=null&&data.img_view.length>0" v-bind:style="{backgroundImage: 'url(' + data.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="data.img.length>1">多图</label></div>
              <div class="item-ifo">
                <div class="ifo-wrap">
                  <div class="ifo-wrap-cell">
                    <div class="goods-msg clearfix">
                      <div class="goods-name ellipsis-2">
                        <i class="pre-label" v-show="data.sale_type==2">预售</i>
                        <span class="name">{{data.kind_name}}{{data.title}}</span>
                      </div>
                      <div class="goods-price">
                        <div class="pre-date ellipsis" v-if="data.sale_type==2">
                          <span class="pre-time ellipsis">{{data.sale_pre.month}}月{{data.sale_pre.day}}上市</span>
                        </div>
                        <div class="price" v-else>
                          <label v-if="data.price_type==2" class="face">面议</label>
                          <label v-else><big>{{data.price}}</big>元/{{data.price_unit_name}}</label>
                        </div>
                      </div>
                    </div>
                    <div class="goods-from">
                      <div class="goods-address ellipsis">
                        <i class="address-icon"></i>
                        <span>{{data.province_name}}</span>
                        <span>{{data.city_name}}</span>
                      </div>
                      <div class="goods-size">
                        <label v-if="data.size_unit_name">
                          <span>{{data.size_min}}-{{data.size_max}}{{data.size_unit_name}}</span>
                        </label>
                        <label v-else>规格不限</label>
                      </div>
                    </div>
                    <div class="goods-seller">
                      <div class="seller">
                        <label class="name ellipsis">
                          <span v-if="data.verify_classify" >{{data.verify_name}}</span>
                          <span v-else>{{data.contact_name}}</span>
                        </label>
                        <span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
                        <span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
                        <span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
                        <span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
                        <span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
                        <span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
                        <span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
                        <span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
                      </div>
                      <div class="data ellipsis">{{data.updated_view}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
          </div>
          </div>
      </div>
      <div class="focus-status" v-show="focustatus">{{focustext}}</div>
      <share :shareshow="shareshow" @shareClose="shareClose"></share>
    </bouncer>
    <div class="detail-phone vux-1px-t">
      <div class="phone">
        <div class="care-wrapper">
          <label v-if="!isFocus" @click="focusShop">
            <i class="focus"></i>
            <span>关注</span>
          </label>
          <label v-else @click="deletefocusShop">
            <i class="focus-on"></i>
            <span class="focus-red">已关注</span>
          </label>
        </div>
        <div class="phone-wrapper" @click="shopphonecall">
          <i class="phone-icon"></i>
          <span>打电话</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem } from "vux"
import share from "@/components/share/share.vue"
import Bouncer from "@/components/Bouncer"

const focusOrUnfocus = type => id =>
  axios.post("/api/trade/shop/collectionItem", qs.stringify({ id, type }))
const focus = id => focusOrUnfocus(1)(id)
const unfocus = id => focusOrUnfocus(2)(id)

const getShopInfo = id =>
  axios.get("/api/trade/shop/getDetail", { params: { id } })
const getDemandList = id =>
  axios.get("/api/trade/shop/getDemandList", { params: { id } })
const getSupplyList = id =>
  axios.get("/api/trade/shop/getSupplyList", { params: { id } })

export default {
  name: "shops",
  data() {
    return {
      nowIndex: 0,
      DetailShop: [],
      ShopDemandList: [],
      ShopSupplyList: [],
      ShopDemandStatus: "loading",
      ShopDemandloading: true,
      ShopSupplyStatus: "loading",
      ShopSupplyloading: true,
      buyNumber: 0,
      saleNumber: 0,
      m: 0,
      n: 1,
      shareshow: false,
      isFocus: 0, //0代表未关注，1代表已关注,
      focustatus: false,
      focustext: "",
      shopId: ""
    }
  },
  mounted() {
    this.shopId = Number(this.$route.params.id)
    this.init()
  },
  methods: {
    onItemClicksupply(m) {
      this.nowIndex = m
      this.$nextTick(() => {
        this.$refs.bouncer.refresh()
      })
    },
    onItemClickdemand(n) {
      this.nowIndex = n
      this.$nextTick(() => {
        this.$refs.bouncer.refresh()
      })
    },
    shareopen() {
      this.shareshow = true
    },
    shareClose() {
      this.shareshow = false
    },
    getloadingdata() {
      window.location.reload()
    },
    async focusShop() {
      let response
      try {
        response = await focus(this.shopId)
        this.isFocus = 1
        this.focustatus = true
        this.focustext = "关注成功"
        var t = setTimeout(() => {
          this.focustatus = false
        }, 1000)
      } catch (e) {}
    },
    async deletefocusShop() {
      let response
      try {
        response = await unfocus(this.shopId)
        this.isFocus = 0
        this.focustatus = true
        this.focustext = "已取消关注"
        var t = setTimeout(() => {
          this.focustatus = false
        }, 1000)
      } catch (e) {}
    },
    shopphonecall() {
      if (this.sign_in == 1) {
        location.href = "tel:" + this.DetailShop.contact_mobile
      }
    },
    init() {
      const shopInfoPromise = getShopInfo(this.shopId).then(response => {
        this.DetailShop = response.data.resp_data
        this.isFocus = this.DetailShop.collection
      })
      const supplyListPromise = getSupplyList(this.shopId)
        .then(response => {
          this.ShopSupplyList = response.data.resp_data.data
          this.saleNumber = response.data.resp_data.data.length
          this.ShopSupplyloading = false
          if (!response.data.resp_data.data.length) {
            this.ShopSupplyloading = true
            this.ShopSupplyStatus = "noData"
          }
        })
        .catch(function(error) {
          this.ShopSupplyloading = false
          this.ShopSupplyStatus = "error"
        })
      const demandListPromise = getDemandList(this.shopId)
        .then(response => {
          this.ShopDemandList = response.data.resp_data.data
          this.buyNumber = response.data.resp_data.data.length
          this.ShopDemandloading = false
          if (!response.data.resp_data.data.length) {
            this.ShopDemandloading = true
            this.ShopDemandStatus = "noData"
          }
          this.ShopDemandloading = false
        })
        .catch(function(error) {
          this.ShopDemandloading = false
          this.ShopDemandStatus = "error"
        })

      Promise.all([shopInfoPromise, supplyListPromise, demandListPromise]).then(
        v => {
          this.$nextTick(() => {
            this.$refs.bouncer.refresh()
          })
        }
      )
    }
  },
  computed: {
    sign_in() {
      return this.$store.state.user.sign_in
    }
  },
  watch: {
    saleNumber(v) {
      if (v >= this.buyNumber) {
        this.m = 0
        this.n = 1
      }
    },
    buyNumber(v) {
      if (v > this.saleNumber) {
        this.m = 1
        this.n = 0
      }
    }
  },
  components: {
    Tab,
    TabItem,
    share,
    Bouncer
  }
}
</script>

<style>
@import url("../../../styles/common/trade/trade-common.css");

.mt-shop-detail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 50px;
  left: 0;
}
.detail-shop {
  width: 100%;
  height: 180px;
  background: url(../../../static/trade-img/4-bg.png) no-repeat center
    center/cover;
  background-size: 100% 180px;
}
.shop-icon-wrapper {
  width: 100%;
  height: 40px;
  padding-top: 60px;
  position: relative;
}
.shop-icon-wrapper .shop-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  left: 40%;
  top: 35px;
  border: 1px solid #fff;
}
.shop-icon-wrapper .shop-icon img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.shop-icon-wrapper .shop-share {
  width: 30px;
  height: 30px;
  background: url(../../../static/trade-img/share-icon.png) no-repeat center
    center/cover;
  background-size: 30px 30px;
  position: absolute;
  right: 10px;
  top: 60px;
}
.shop-icon-wrapper .shop-share a {
  display: block;
  width: 30px;
  height: 30px;
}
.shop-title-wrapper {
  padding: 0 10px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  color: #333;
  font-size: 16px;
}
.shop-title-wrapper .shop-title {
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  max-width: 100px;
}
.shop-kind-wrapper {
  padding: 5px 20px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 14px;
  color: #888;
}
.shop-kind-wrapper span {
  margin-right: 2px;
}
.tab-item {
  background: #fff;
  padding-bottom: 50px;
}
.vux-tab .vux-tab-item {
  font-size: 16px !important;
}
.vux-tab .vux-tab-item.vux-tab-selected {
  color: #008cf0 !important;
}
.vux-tab-ink-bar {
  background-color: #008cf0 !important;
}
.focus-status {
  width: 40%;
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 200px;
  left: 30%;
  border-radius: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 15px;
  color: #fff;
}
</style>
